<template>
  <div>
    <div v-if="fileType == 'images'" class="image-list" style="width:100%">
        <draggable v-model="imageList" v-bind="{group:'item'}" @change="changeSort">
          <div v-for="(item, index) in imageList" :key="index" class="image-wrap">
            <div class="imgStyle">
              <img :src="item.url" /><br/>
              <el-input size="mini" v-if="showtitle" style="width:102px; position:relative; bottom:10px;" v-model="item.id" placeholder="图片id"></el-input>
            </div>
            <div class="icon-wrap" :style="{bottom:bottom}">
              <i class="el-icon-delete" @click.stop="handleRemoveImages(index)"></i>&nbsp;&nbsp; 
              <i style="cursor:pointer" :class="showtitle ? 'el-icon-top' : 'el-icon-bottom'" @click.stop="handlePictureCardPreview(index)"></i>
            </div>
          </div>
          <el-upload v-if="imageList.length<limit" action="#" ref="upload" class="image-uploader" :before-upload="beforeUpload" :http-request="upload"  :limit="limit-imageList.length" :on-exceed="maxLimit"  multiple  >
            <i :class="loading ? 'el-icon-loading' : 'el-icon-plus'"></i>
          </el-upload>
        </draggable>
    </div>
    <div v-else-if="fileType == 'image'" class="image-list" style="width:100%">
        <el-row>
          <div class="image-wrap" v-if="siglepic">
            <div class="imgStyle">
              <img :src="siglepic" />
            </div>
            <div class="icon-wrap" :style="{bottom:bottom}">
              <i class="el-icon-delete" @click.stop="handleRemoveImage()"></i>
            </div>
          </div>
          <el-upload action="#" ref="upload" class="image-uploader" :before-upload="beforeUpload" :http-request="upload" :limit="1" >
            <i :class="loading ? 'el-icon-loading' : 'el-icon-plus'"></i>
          </el-upload>
        </el-row>
        
    </div>
    
    
  </div>
</template>

<script>
import draggable from "vuedraggable"
//import ImagesPick from '@/components/common/ImagesPick.vue'
import { confirm } from '@/uitls/common'
  export default {
    name:'ImagesUpload',
    //components: {draggable,ImagesPick},
	 components: {draggable},
    props: {
      picker:{
        type:String,
        default:'',
      },
      images: {
        type: Array,
        default:()=>[]
      },
      image:{
        type:String,
      },
      file:{
        type:String,
      },
      files:{
        type:Array,
        default:()=>[]
      },
      fileType:{
        type:String
      },
      uploadType:{
        type:String,
        default:'1',
      },
	  limit:{
		  type:String,
		  default:'1',
	  }
    },
    data() {
      return {
        loading: false,
        showtitle:false,
        siglepic: this.image,
        imageList:this.images,
        sigleFile:this.file,
        fileList:this.files,
        bottom:'12px',
        videoFlag:true,
        progressPercent:0,
        progress:false,
        imagesDialogStatus : false,
        uploadUrl:'',
		showBtnImg:true,
      }
    },
    watch: {
      image() {
        this.siglepic = this.image
      },
      images(){
        this.imageList = this.images
		if(this.imageList.length>this.limit){
			this.showBtnImg = false;
		}else{
			this.showBtnImg = true;
		}
      },
      file(){
        this.sigleFile = this.file
      },
      files(){
        this.fileList = this.files
      },
      siglepic(){
        this.$emit('update:image',this.siglepic)
      }
    },
    methods: {
      beforeUpload(item){
		if(this.imageList.length>=this.limit){
			this.$message.error('最多可以上传'+this.limit+'张图片')
			return false
		}else if(this.fileType == 'image' || this.fileType == 'images'){
          if(item.type.split('/')[0] !== 'image') {
            this.$message.error('请选择图片')
            return false
          }
        }
        this.loading = true
      },
      upload(item){
          let formdata = new FormData();
          formdata.append('file', item.file)
          const config = {
            onUploadProgress: progressEvent => {
              if (progressEvent.lengthComputable) {
                this.progress = true
                this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
              }
            }
          }
          try {
            this.$axios.post('/api/client/base/uploadfile', formdata,config).then(res => {
              
			  if (res.data.code == 1) {
                this.progressPercent = 0
                this.progress = false
                if(this.fileType == 'images'){
                    this.imageList.push({url: res.data.data.url,id:res.data.data.id})
                    this.$emit('update:images',this.imageList)
                }else if(this.fileType == 'image'){
                    this.siglepic = res.data.url
                    this.$emit('update:image',res.data.data.url)
                }else if(this.fileType == 'files'){
                    this.fileList.push({url: res.data.data.url,id:res.data.data.id})
                    this.$emit('update:files',this.fileList)
                }else{
                    this.sigleFile = res.data.url
                    this.$emit('update:file',res.data.url)
                }
              }
            })
          }catch (error) {
            this.$message.error('上传失败')
          }finally {
            this.loading = false
            this.$refs.upload && this.$refs.upload.clearFiles()
          }
          
      },
      handleRemoveImages(index) {
        confirm({content:'确定要删除吗'}).then(() => {
            this.imageList.splice(index, 1)
            this.$emit('update:images',this.imageList)
        }).catch(() => {})
      },
      handleRemoveFiles(index) {
        confirm({content:'确定要删除吗'}).then(() => {
            this.fileList.splice(index, 1)
            this.$emit('update:files',this.fileList)
        }).catch(() => {})
      },
      handleRemoveImage() {
        confirm({content:'确定要删除吗'}).then(() => {
            this.siglepic = ''
            this.$emit('update:image','')
        }).catch(() => {})
      },
      handleRemoveFile() {
        confirm({content:'确定要删除吗'}).then(() => {
            this.sigleFile = ''
            this.$emit('update:file','')
        }).catch(() => {})
      },
      handlePictureCardPreview(i){
          this.showtitle = !this.showtitle
          this.showtitle == true ? this.bottom = "45px" : this.bottom = "12px"
      },
      changeSort(){
        this.$emit('update:images',this.imageList)
      },
      openImagesPick(){
        this.imagesDialogStatus = true
      },
	   maxLimit() {
	   
		
		this.$message.error('最多设置'+this.limit+'张图片')
			
		 
	       
	      },
    }
  }
</script>

<style  lang="less">
.upload-demo{display: inline-block; margin-right: 5px;}
.el-upload--picture-card {width:100px; height: 100px; line-height: 100px;}
.el-upload-list--picture-card .el-upload-list__item {width:100px; height: 100px; }
.el-upload-list__item-name{padding-left: 0;}
.el-upload-list__item{line-height: 1.1;}
.image-list, .image-item {
  .image-wrap {
    position: relative;
    display: inline-block;
    box-sizing: content-box;
    margin: 0 10px 0 0;
    vertical-align: top;
    &:hover {
      .icon-wrap {
        opacity: 1;
      }
    }
    .imgStyle img{
      width:100px;
      height: 100px;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
    }
    .icon-wrap {
      position: absolute;
      left: 0;
      border-radius: 6px;
      width: 102px;
      height: 102px;
      cursor: default;
      text-align: center;
      line-height: 100px;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, .7);
      transition: opacity .3s;
      .el-icon-zoom-in {
        cursor: pointer;
        margin-right: 8px;
      }
      .el-icon-delete {
        cursor: pointer;
      }
    }
  }
}
.image-item {
  display: inline-flex;
}
.image-uploader {
  display: inline-block;
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width:100px;
    height:100px;
    [class^="el-icon"] {
      line-height: 100px;
      font-size: 24px;
      color: #8c939d;
      text-align: center;
    }
    &:hover {
      border-color: #409EFF;
    }
  }
}
</style>
